const path = require('path')
const webpack = require('webpack')
//导入在内存中生成html页面的插件
//只要插件都一定要放到plugin节点中去
const htmlWebpackPlugin = require('html-Webpack-Plugin')

//这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
//    在配置配置文件中，需要手动制定入口和出口文件
    entry: path.join(__dirname, './src/main.js'), //入口 表示要使用webpack打包哪个文件
    output: {
        //    这是输出文件相关的配置
        path:path.join(__dirname, './dist'), //指定打包好的文件，输出到哪个目录中去
        filename: "bundle.js" //指定输出的文件的名称
    },
    plugins: [
        new htmlWebpackPlugin({
            //    创建一个在内存中生成HTML页面的插件
            //    指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            template:path.join(__dirname, './src/index.html'),
            //    指定生成的页面的名称
            filename: 'index.html'
        })
    ],
    module: { //这个节点，用于配置所有第三方模块加载器
        rules:[ //所有第三方模块的匹配规则
            //配置处理第三方loader规则
            {test:/\.css$/, use:['style-loader', 'css-loader']},
            //处理图片路径的第三方loader规则
            {test:/\.(jpg|png|gif|bmp|jpeg)$/, use:'url-loader?limit=35052&name=[hash:8]-[name].[ext]'},
            // // //处理字体路径的第三方loader规则
            {test:/\.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'},
            //配置Babel来转换高级的ES6语法
            {test:/\.js$/, use:'babel-loader', exclude: /node_modules/},
            //处理.vue文件的loader
            {test:/\.vue$/, use:'vue-loader'}

        ]
    },
    devServer: {
        disableHostCheck: true
    }
}
